<template>
  <div class="alarmAmount-root">
    <formTitleVue
      title="指标体系汇总"
      :selectOptions="selectOptions"
    />
    <div style="margin: 60px 40px">
      <el-row :gutter="10">
        <el-col :span="8"  style="text-align: center" >
            <div style="padding: 5px; font-size: 16px; font-weight: 900;cursor: pointer;" @click="handleDialog">{{dataNum.self}}</div>
            <div style="padding: 5px; font-size: 16px;cursor: pointer;" @click="handleDialog">自体检指标</div>
        </el-col>
        <el-col :span="8" style="text-align: center" >
          <div style="padding: 5px;font-size: 16px;  font-weight: 900;cursor: pointer;" @click="handleDialog">{{dataNum.third}}</div>
          <div style="padding: 5px;font-size: 16px;cursor: pointer;" @click="handleDialog">第三方体检指标</div>
        </el-col>
        <el-col :span="8" style="text-align: center" >
          <div style="padding: 5px;font-size: 16px;  font-weight: 900;cursor: pointer;" @click="handleDialog">{{dataNum.satisfaction}}</div>
          <div style="padding: 5px;font-size: 16px; cursor: pointer;" @click="handleDialog">满意度调查指标</div>
        </el-col>
      </el-row>
    </div>
     <!--指标树弹框-->
    <TargetDialog
      :dialog-visible="targetDialogShow"
      @close="targetEditClose"
      @success="targetEditSuccess"
      :title="targetTitle"
      :year="searChForm.year"
      :cityCode="searChForm.cityCode"
      :hasDone="false"
    ></TargetDialog>
  </div>
</template>

<script>
  import formTitleVue from "@/components/FormTitle/formTitle.vue";
  import { overviewSummary }  from "@/api/risk/cityWaringResult"
  import TargetDialog from '@/views/xy/public/cityAnalysis/components/targetDialog2'

  export default {
    name: "targetSummary",
    components: {
      formTitleVue,TargetDialog
    },
    props:{
      yearOptions:{},
      areaOptions:{}
    },
    data() {
      return {
        dataNum:{},
        selectOptions: [
          {
            key:"year",
            selectValue: "",
            options: [],
            changeFn: this.selectChange1,
          },
          {
            key:"area",
            selectValue: "",
            options: [],
            changeFn: this.selectChange2,
          },
        ],
        searChForm: {
          year:"",
          cityCode:""
        },
        targetDialogShow:false,
          targetTitle:"选择体检指标",
      }
    },
    watch:{
      'yearOptions':{
        handler(newVal, oldVal) {
          this.selectOptions.forEach(t=> {
            if (t.key == 'year') {
              t.options = newVal
            }
          })
        },
        deep: true,
        immediate: true
      },
      'areaOptions':{
        handler(newVal, oldVal) {
          this.selectOptions.forEach(t=> {
            if (t.key == 'area') {
              t.options = newVal
            }
          })
        },
        deep: true,
        immediate: true
      },
    },
    methods: {
      handleDialog(){
        console.log('handleDialog====')
        this.targetDialogShow = true
      },
      targetEditClose(){
        this.targetDialogShow =false
      },
      targetEditSuccess(data){
        console.log("获取值",data)
        this.targetEditClose()
      },
      selectChange1(item){
        this.searChForm.year = item
        this.search()
      },
      selectChange2(item){
        this.searChForm.cityCode = item
        this.search()
      },
      search() {
        this.fetch({
          ...this.searChForm,
        })
      },
      fetch(params = {}) {
        overviewSummary(params).then(res => {
          if (res.code == 200) {
            this.dataNum = res.data
            console.log("dataNum===>",this.dataNum)
            // this.tableData=res.data
          } else {
            this.$message({
              message: this.$t('tips.systemException'),
              type: 'error'
            })
          }
        }).finally(final => {
        })
      },
      init(){
        this.selectOptions[0].selectValue = this.selectOptions[0].options[0].value
        this.searChForm.year = this.selectOptions[0].options[0].value
        this.searChForm.cityCode = ""
        this.search()
      },
    },
    mounted() {
      this.init()
    },
  }
</script>

<style scoped>
</style>
